<template xmlns:v-lazy="http://www.w3.org/1999/xhtml">
  <div
    class="admin-com-cell-02"
    :class="{ 'admin-com-cell-02-hover': hover, 'w-hover-glow': hover, 'w-pointer': hover}"
    @click="cellClick">
    <div
      :style="{ paddingRight: `${operationWidth ? operationWidth + 10 : 0}px` }"
      class="text-box">
      <p
        class="title text">
        <span
          :class="{ 'w-hover-text': link, 'w-pointer': link }"
          @click.stop="linkClick">{{ title }}</span>
      </p>
      <p
        class="describe text w-text-warp"
        v-if="describe">{{ describe }}</p>
      <p
        class="detil text w-text-warp"
        v-if="detail">{{ detail }}</p>
      <slot name="other"/>
    </div>
    <div
      class="attachment w-flex-center"
      :style="{ width: `${operationWidth}px` }"
      v-if="operationWidth">
      <slot/>
    </div>
  </div>
</template>

<script>

  export default {
    name: 'AdminComCell00',
    props: {
      hover: {
        type: Boolean,
        default: true
      },
      /**
       * 标题
       */
      title: {
        type: String,
        default: ''
      },
      /**
       * 点击标题调换的url
       */
      link: {
        type: String,
        default: ''
      },
      /**
       * 详情
       */
      detail: {
        type: String,
        default: ''
      },
      /**
       * 描述
       */
      describe: {
        type: String,
        default: ''
      },
      /**
       * 操作宽度
       */
      operationWidth: {
        type: Number,
        default: 0
      }
    },
    methods: {
      /**
       * 链接点击
       */
      linkClick() {
        if (this.link) {
          window.open (this.link)
        } else {
          this.cellClick ()
        }
      },
      /**
       * cell 点击
       */
      cellClick() {
        this.$emit ('cellClick')
      }
    }
  }
</script>

<style lang="scss" scoped>
  .admin-com-cell-02 {
    display: block;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 4px;
    background-color: #efefef;
    position: relative;

    > .text-box {
      flex-direction: column;
      height: 100%;

      .text {
        margin: 0;
      }

      .title {
        font-size: 18px;
        color: #333;
      }

      .describe {
        color: #999;
        font-size: 14px;
        line-height: 20px;
        padding-top: 5px;
      }

      .detil {
        font-size: 16px;
        color: #666;
        line-height: 24px;
        padding-top: 5px;
      }
    }
    >.attachment {
      position: absolute;
      right: 10px;
      top: 0px;
      height: 100%;
    }
  }

  .admin-com-cell-02-hover:hover {
    background: -webkit-linear-gradient(180deg, rgba(223,190,106,0.8), rgba(146,111,52,0.8), rgba(34,34,34,0), rgba(34,34,34,0));
    background: linear-gradient(270deg, rgba(223,190,106,0.8), rgba(146,111,52,0.8), rgba(34,34,34,0), rgba(34,34,34,0));
    background-size: 300% 300%;
    background-position: 99% 50%;

    > .text-box {

      .title {
        color: #fff;
      }

      .describe {
        color: #ddd;
      }

      .detil {
        color: #eee;
      }
    }
  }

</style>
